<template>
	<div class="foot">
		<div class="technolines">
			<div class="lines"></div>
		</div>
		<div class="foot-box">
			<div class="noe-box">
				<div class="noe-item">
					{{$t("companyModel.name")}}
				</div>
				<div class="noe-item">
					粤ICP备16114726号
				</div>
				<div class="noe-item">
					<img src="../../assets/images/beian.png" alt="">粤公网安备44010502001858号
				</div>
			</div>
			<div class="two-box">
				<div class="noe-item">
					{{$t("companyModel.phone")}}
				</div>
				<div class="noe-item">
					{{$t("companyModel.address")}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Nav",
		data() {
			return {}
		},
		mounted() {}
	}
</script>

<style scoped>
	@keyframes technolines {
	  0% {
	    width: 0;
	  }
	  100% {
	    width: 100%;
	  }
	}
	.technolines{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10px;
		background-color: #fff;
	}
	.lines{
		height: 10px;
		/* background: linear-gradient(to right, #00ff00, #ff00ff); */
		background-color: #fff;
		/* animation: technolines 3s linear infinite; */
	}
	.foot {
		width: 100%;
		display: flex;
		justify-content: center;
		/* background-color: rgba(21, 113, 196, 1); */
		background-color: rgba(0, 0, 0, 1);
		position: relative;
		font-size: 0.9rem;
	}

	.foot-box {
		width: 1200px;
		height: 300px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #fff;
	}

	.noe-box {
		display: flex;
		justify-content: center;
		margin: 0 0 20px 0;
	}

	.noe-item {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 20px;
	}

	.two-box {
		display: flex;
		justify-content: center;
	}

	@media screen and (max-width: 930px) {
		.noe-box {
			display: flex;
			justify-content: center;
			flex-direction: column;
			
		}
		.two-box {
			display: flex;
			justify-content: center;
			flex-direction: column;
			
		}
		.noe-item{
			margin: 10px 0;
		}
	}
</style>
